<!DOCTYPE html>
<html>
<head>
    <meta charset='UTF-8'>
    <title>重要内置关系</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <game></game>
        <!-- new VueComponent -->
    </div>
</body>
<!--   JS   -->
    <script>
        Vue.prototype.x=9
        //定义组件
        const game = Vue.extend({
            name:'game',
            template:`
            <div>
                <h2>游戏名称:{{gamename}}</h2>
                <h2>游戏城市:{{city}}</h2>
                <button @click="show">点我输出x</button>
            </div>
            `,
            data(){
                return{
                gamename:'光与夜之恋',
                city:'光启市',
                }
            },
            methods: {
                show(){
                    console.log(this.x)
                }
            },
        })

        //创建一个vm
        const vm = new Vue({
            el:'#root',
            data:{
                msg:'hello'
            },
            components:{
                game
            }
        })

        console.log(game.prototype.__proto__ === Vue.prototype)
       /*  function Demo(){
            this.a=1
            this.b=2
        }
        const d = new Demo()
        console.log(Demo.prototype)//显式原型属性
        console.log(d.__proto__)//隐式原型属性

        Demo.prototype.x=99
        console.log(d.x) */
    </script>
</html>